<template>
    <div class="hot-remmend-wrapper">
        <div class="nav-bar title-dot">
            <router-link to="/discover/playlist/" class="title">热门推荐</router-link>
            <div class="tabs">
                <template v-for="(item, index) in hot_recommend" key="index">
                    <router-link :to="{path:item.route}" class="fc">{{ item.name }}</router-link>
                    <span class="line" v-if="index < hot_recommend.length - 1">|</span>
                </template>
             
            </div>
            <span class="more">
                <router-link to="/discover/playlist/" class="fc">更多</router-link>
                <i class="right-arrow"></i>
             </span>
        </div>

        <ul class="hot-content">
            <Cover v-for="(item, index) in hotRecommendItems" key="index" v-bind="{...item}"></Cover>
        </ul>
    </div>
</template>
<script setup>

import hot_recommend from '@/json_data/hot_recommend.json'
import Cover from './Cover.vue';
import hotRecommendItems from '@/json_data/hot_recommend_item.json'

</script>

<style lang="scss" scoped>
.hot-remmend-wrapper{

    &::after{
    content:"";
        display: block;
        clear:both;
    }

    .hot-content{
        margin: 20px 0 0 -50px;
    }

    .nav-bar{
        height: 33px;
        padding: 0 10px 0 34px;
        background-position: -225px -156px;
        border-bottom: 2px solid #C10D0C;

        .title{
            font-size: 20px;
            font-weight: normal;
            float: left;
            line-height: 28px;
        }
        .tabs{
            float: left;
            margin: 7px 0 0 20px;
            .fc{
                color: #666;
            }

            .line{
                margin: 0 10px;
                color: #ccc;
            }
          
        }

        .more{
                float: right;
                margin-top: 9px;
                .right-arrow{
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    margin-left: 4px;
                    vertical-align: middle;

                    background-position: 0 -240px;
                }
            }
    }
}
  
</style>